<template>
  <div class="container" v-cloak style="display: none;" :style="{display: 'block'}">
    <div class="box">
        <div class="login">
            <div class="top">
                <h1 style="text-align:left;"><i class="el-icon-connection" style="color:#00acac;font-size:1.5em"></i> 惠购之家 <span style=" font-weight: normal;">store</span> <br> <span class="spa_zhu">商城管理平台登录
</span></h1>
          <div class="suo">
              <i class="el-icon-lock"></i>
          </div>
            </div>
        
        
     <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item prop="name">
    <el-input v-model="ruleForm.name" placeholder="用户名"></el-input>
  </el-form-item>     
   <el-form-item prop="pwd">
    <el-input v-model="ruleForm.pwd" placeholder="密码"></el-input>
  </el-form-item>
    <el-form-item prop="str_yzm" id="div_yzm">
    <el-input  v-model="ruleForm.str_yzm" placeholder="验证码" id="yzm_input"></el-input>
    <p class="p_yzm">
        <span class="spa_yzm" v-html="spa_yzm"></span> &emsp;<span style="color:#fff; cursor:pointer;" @click="getcode()">换一张</span>
    </p>
  </el-form-item>
    <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
  <el-form-item>
    <el-input type="button" @click.enter.native="submitForm('ruleForm')" :loading="logining" value="登录" id="login_btn"/>
  </el-form-item>  
</el-form>
      <p><span class="zhuce" @click="zhucefun()">注册</span>  &emsp;&emsp;&emsp; <span class="wangji">忘记密码</span></p>
        
        </div>

    </div>
  </div>   
</template>
<script type="text/ecmascript-6">
import { login } from '../api/userMG'
import { setCookie, getCookie, delCookie } from '../utils/util'
import md5 from 'js-md5'
export default {
  name: 'login',
  data() {
    return {
      //定义loading默认为false
      logining: false,
      // 记住密码
      rememberpwd: false,
       spa_yzm:'',
        ruleForm: {
          name: '',
          pwd:'',
          str_yzm:'',
        },
      //rules前端验证
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' } ,
          { min: 2, max: 1000, message: '长度2位以上', trigger: 'blur' }
          ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 20, message: '长度在 5 到 20 位', trigger: 'blur' }
          ],
        str_yzm: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
            { min:4, max: 4, message: '长度为4位', trigger: 'blur' }
          ]
      }
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.$message({
      message: '请输入正确的用户名密码及验证码',
      type: 'success'
    })
    // 获取图形验证码
    this.getcode()
    // 获取存在本地的用户名密码
    this.getuserpwd()
    
  },
  // 里面的函数只有调用才会执行
  methods: {
    // 获取用户名密码
    getuserpwd() {
      if (getCookie('user') != '' && getCookie('pwd') != '') {
        this.ruleForm.name = getCookie('user')
        this.ruleForm.pwd = getCookie('pwd')
        this.rememberpwd = true
      }
    },
    //获取info列表
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.logining = true
          let obj=this.$qs.stringify({
              name:this.ruleForm.name,
              pwd: this.ruleForm.pwd,
              vercode: this.ruleForm.str_yzm,
          });
          this.$apiPost('http://47.94.4.201/index.php/index/index/login',obj).then((res)=>{
            if(res.code==0){
              this.$message.success('登录成功')
                  clearTimeout(this.timer);  //清除延迟执行 
                this.timer=setTimeout(()=>{  //设置延迟执行
                  this.logining = false
                  this.$store.commit('login', 'true')
                  this.$router.push({ path: '/goods/Goods' })
                },1000);   
              // 注释
              // login(this.ruleForm).then(res => {
              //   if (res.success) {
              //     if (this.rememberpwd) {
              //       //保存帐号到cookie，有效期7天
              //       setCookie('user', this.ruleForm.name, 7)
              //       //保存密码到cookie，有效期7天
              //       setCookie('pwd', this.ruleForm.pwd, 7)
              //     } else {
              //       delCookie('user')
              //       delCookie('pwd')
              //     }
              //     //如果请求成功就让他2秒跳转路由
              //     setTimeout(() => {
              //       this.logining = false
              //       // 缓存token
              //       localStorage.setItem('logintoken', res.data.token)
              //       // 缓存用户个人信息
              //       localStorage.setItem('userdata', JSON.stringify(res.data))
              //       this.$store.commit('login', 'true')
              //       this.$router.push({ path: '/goods/Goods' })
              //     }, 1000)
              //   } else {
              //     this.$message.error(res.msg)
              //     this.logining = false
              //     return false
              //   }
              // })
            }else if(res.code==3){
              this.$message.error('验证码不通过')
            }else if(res.code==2){
              this.$message.error('用户或密码不能为空')
            }else if(res.code==1){
              this.$message.error('登陆失败')
            }
        })
        } else {
            this.$message.error('请完整的输入信息！')
            this.logining = false
            return false;
        }
      });
   },
     getcode(){
          this.$apiGet('http://47.94.4.201/index.php/index/index/getcode').then((res)=>{   
             this.spa_yzm=res.msg
          })
      },
      zhucefun(){
        clearTimeout(this.timers);  //清除延迟执行 
        this.timers=setTimeout(()=>{  //设置延迟执行
          this.$router.push({ path:'/register'})
        },1000);   
      }
  }
}
</script>

<style scoped>
.container{
    width: 100vw;
    height: 100vh;
    background: url('../assets/img/login_tu.jpg') no-repeat;
    z-index: -10;
}
.container .box{
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.5);
  z-index: -5;
  color:#fff;
 
  display: flex;
  display: -webkit-flex;

}
.login{
  /* border: 1px solid red; */
  justify-content: center;
  align-items: center;
  margin: auto;
  position: relative;
}
.top{
  position: relative;
}
.top .spa_zhu{
  font-weight: normal;
  font-size: 0.5em;
  color: #7f9295;
}
.top .suo{
  position: absolute;
  top:-1vh;
  right:0;
  color: #7f9295;
  font-size: 5em;
 
}
.el-input{
  margin-top:1vh;
  width:35vw;
  /* display: block; */
}

/deep/ .el-input .el-input__inner{
 background: rgba(0,0,0,.5);
  border: 1px solid transparent;
  color: #fff;
  height:7vh;
}
/deep/ .el-form-item{
  margin-left: -7vw;
  margin-right: 1vw;
}
/deep/ .el-input #login_btn{
  background:#00acac;
  font-weight: normal;
  font-size:1.5em;
}

/deep/ #yzm_input{
  width: 20vw;
  display: inline-block;
}
/deep/ #div_yzm{
 position: relative;
}
.spa_yzm{
  display: inline-block;
  width:50%;
  height:6vh;
  line-height:6vh;
  background: skyblue;
  color:#00acac;;
  font-size:1.5em;
  font-style: italic;
  cursor:pointer;
}
.p_yzm{
  color:#b2b0ae;
  width:10vw;
  display: inline-block;
  position: absolute;
  top:-1vh;
  right: 3vw;
  text-align:center;
}
.zhuce{
  margin: 0 0 3vh 1vw;
  cursor:pointer;
}
.wangji{
  cursor:pointer;
}
.remember {
  color: #fff;
  margin: 0 0 3vh 1vw;
}
</style>